<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name='description' content='欢迎访问星巴克中国官网。'>
    <link rel="icon" href="./img/favicon-32x32.png" type="image/png" sizes="32x32"/>
    <link rel="stylesheet" href="./css/normalize.css">
    <link rel="stylesheet" href="./css/xibake.css">
    <link rel="stylesheet" href="./bootstrap-4.4.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="font-awesome-4.7.0/css/font-awesome.css">
    <title>星巴克|用每一杯咖啡传递星巴克独特的咖啡体验</title>
</head>

<body>
    <div class="row">
        <!--左侧导航-->
        <div class="col-sm-12 col-lg-3 left left-fixed">
            <div id="template1">
                <div class="row">
                    <div class="col-10">
                        <!--导航条-->
                        <ul class="nav">
                            <li class="nav-item">
                                <a href="星巴克.html" class="nav-link active">
                                    <img width="36" src="./img/logo.svg" alt="" class="rounded-circle">
                                </a>
                            </li>
                            <li class="nav-item mt-1">
                                <a href="javascript:void(0);" class="nav-link">门店</a>
                            </li>
                            <li class="nav-item mt-1">
                                <a href="javascript:void(0);" class="nav-link">账户</a>
                            </li>
                            <li class="nav-item mt-1">
                                <a href="javascript:void(0);" class="nav-link">菜单</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2 mt-2 font-menu text-right">
                        <a href="javascript:void(0);" id="a1"><i class="fa fa-bars"></i></a>
                    </div>
                </div>
                <div class="margin1">
                    <h4 class="ml-3 my-3 d-none d-sm-block text-lg-center">
                        <b>心情惬意，来杯咖啡吧&nbsp; ☕</b>
                    </h4>
                    <div class="ml-3 my-3 d-none d-sm-block text-lg-center">
                        <a href="#" class="card-link btn rounded-pill text-success"><i><img
                                    src="./img/icon-account.svg" alt=""></i>&nbsp;登&nbsp;录</a>
                        <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;册</a>
                    </div>
                </div>
            </div>
            
            <div id="template2" class="d-none">
                <div class="row">
                    <div class="col-10">
                        <ul class="nav">
                            <li class="nav-item">
                                <a href="星巴克.html" class="nav-link active">
                                    <img width="36" src="./img/logo.svg" alt="" class="rounded-circle">
                                </a>
                            </li>
                            <li class="nav-item">
                                <a href="星巴克.html" class="nav-link mt-2">咖啡俱乐部</a>
                            </li>
                        </ul>
                    </div>
                    <div class="col-2 mt-2 font-menu text-right">
                        <a href="javascript:void(0);" id="a2"><i class="fa fa-times"></i></a>
                    </div>
                </div>
                <div class="margin2">
                    <div class="ml-5 mt-5">
                        <h6><a href="a.html">门店</a></h6>
                        <h6><a href="b.html">俱乐部</a></h6>
                        <h6><a href="c.html">菜单</a></h6>
                        <hr>
                        <h6><a href="d.html">移动应用</a></h6>
                        <h6><a href="e.html">臻选精品</a></h6>
                        <h6><a href="f.html">专星送</a></h6>
                        <h6><a href="g.html">咖啡讲堂</a></h6>
                        <h6><a href="h.html">烘焙工厂</a></h6>
                        <h6><a href="i.html">帮助中心</a></h6>
                        <hr>
                        <a href="#" class="card-link btn rounded-pill text-success pl-0"><i><img
                            src="./img/icon-account.svg" alt=""></i>&nbsp;登&nbsp;录</a>
                        <a href="#" class="card-link btn btn-outline-success rounded-pill text-success">注&nbsp;册</a>
                    </div>
                </div>
            </div>
        </div>
        <!--右侧主体内容-->
        <div class="col-sm-12 col-lg-9 right p-0 clearfix">
            <div id="carouselExampleCaptions" class="carousel slide" data-ride="carousel">
                <!--图文内容框-->
                <div class="carousel-inner max-h">
                    <div class="carousel-item active">
                        <img src="./img/001.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/002.jpg" class="d-block w-100" alt="">
                    </div>
                    <div class="carousel-item">
                        <img src="./img/003.jpg" class="d-block w-100" alt="">
                    </div>
                </div>
                <!--左右导航按钮-->
                <a href="#carouselExampleCaptions" data-slide="prev" class="carousel-control-prev">
                    <span class="carousel-control-prev-icon"></span>
                </a>
                <a href="#carouselExampleCaptions" class="carousel-control-next" data-slide="next">
                    <span class="carousel-control-next-icon"></span>
                </a>
            </div>

            <div class="p-4 list">
                <h5 class="text-center my-3">咖啡推荐</h5>
                <h5 class="text-center mb-4 text-secondary">
                    <small>在购物旗舰店可以发现更多咖啡心意</small>
                </h5>
                <!--多列卡片浮动排版-->
                <div class="card-columns">
                    <div class="my-4 my-sm-0">
                        <img src="./img/004.jpg" alt="" class="card-img-top">
                    </div>
                    <div class="my-4 my-sm-0">
                        <img src="./img/005.jpg" alt="" class="card-img-top">
                    </div>
                    <div class="my-4 my-sm-0">
                        <img src="./img/006.jpg" alt="" class="card-img-top">
                    </div>
                </div>
            </div>

            <div class="row py-5">
                <div class="col-12 col-sm-6 pt-2">
                    <div class="card border-0 text-center text-sm-left">
                        <div class="card-body ml-5">
                            <h4 class="card-title">咖啡俱乐部</h4>
                            <p class="card-text">开启您的星享之旅，星星越多、会员等级越高、好礼越丰富。</p>
                            <a href="#" class="card-link btn btn-outline-success">注册</a>
                            <a href="#" class="card-link btn btn-outline-success">登录</a>
                        </div>
                    </div>
                </div>
                <div class="col-12 col-sm-6 text-center mt-5">
                    <a href=""><img src="./img/logo-msr-new.svg" class="img-fluid" alt=""></a>
                </div>
            </div>
            <div class="p-4 list">
                <h5 class="text-center my-3">咖啡精选</h5>
                <h5 class="text-center mb-4 text-secondary">
                    <small>在购物旗舰店可以发现更多咖啡心意</small>
                </h5>
                <div class="row">
                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img src="./img/008.png" alt="" class="img-fluid">
                            <h6 class="text-secondary text-center mt-3">会员星礼包</h6>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img src="./img/009.png" alt="" class="img-fluid">
                            <h6 class="text-secondary text-center mt-3">星礼卡</h6>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img src="./img/010.png" height="125px" alt="" class="img-fluid">
                            <h6 class="text-secondary text-center mt-3">电子产品券</h6>
                        </div>
                    </div>
                    <div class="col-12 col-sm-6 col-md-3 mb-3 mb-md-0">
                        <div class="bg-light p-4 list-border rounded">
                            <img src="./img/011.png" alt="" class="img-fluid">
                            <h6 class="text-secondary text-center mt-3">咖啡生活</h6>
                        </div>
                    </div>
                </div>
            </div>
            <div class="p-4">
                <h5 class="text-center my-3">咖啡讲堂</h5>
                <h5 class="text-center mb-4 text-secondary"><small>了解更多咖啡文化</small></h5>
                <div class="box">
                    <ul id="ulList" class="clearfix">
                        <li class="list-border rounded">
                            <img src="./img/012.jpg" alt="" width="300" height="168">
                            <h6 class="text-center mt-3">咖啡的起源于培植</h6>
                        </li>
                        <li class="list-border rounded">
                            <img src="./img/013.jpg" alt="" width="300" height="168">
                            <h6 class="text-center mt-3">咖啡调制</h6>
                        </li>
                        <li class="list-border rounded">
                            <img src="./img/014.jpg" alt="" width="300" height="168">
                            <h6 class="text-center mt-3">咖啡烘焙</h6>
                        </li>
                        <li class="list-border rounded">
                            <img src="./img/015.jpg" alt="" width="300" height="168">
                            <h6 class="text-center mt-3">手冲咖啡</h6>
                        </li>
                    </ul>
                    <div id="left">
                        <i class="fa fa-chevron-circle-left fa-2x text-success"></i>
                    </div>
                    <div id="right">
                        <i class="fa fa-chevron-circle-right fa-2x text-success"></i>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--隐藏导航栏-->
    <div class="row fixed-bottom d-block d-sm-none bg-light border-top py-1" id="footer">
        <ul class="text-center p-0" id="myTab">
            <li><a class="ab" href="星巴克.html"><i class="fa fa-home fa-2x p-1"></i><br>主页</li></a>
            <li><a href="javascript:void(0);"><i class="fa fa-calendar-minus-o fa-2x p-1"></i><br>门店</a></li>
            <li><a href="javascript:void(0);"><i class="fa fa-user-circle-o fa-2x p-1"></i><br>我的账户</a></li>
            <li><a href="javascript:void(0);"><i class="fa fa-bitbucket-square fa-2x p-1"></i><br>菜单</a></li>
            <li><a href="javascript:void(0);"><i class="fa fa-table fa-2x p-1"></i><br>更多</a></li>
        </ul>
    </div>
    <script src="./js/jquery-3.4.1.min.js"></script>
    <script src="./bootstrap-4.4.1-dist/js/bootstrap.min.js"></script>
    <script>
        $(function(){
            $("#a1").click(function(){
                $("#template1").addClass("d-none");
                $(".right").addClass("d-none d-lg-block");
                $("#template2").removeClass("d-none");
            });
            $("#a2").click(function(){
                $("#template2").addClass("d-none");
                $(".right").removeClass("d-none");
                $("#template1").removeClass("d-none");
            });
            var nowIndex=0;
            var liNumber=$("#ulList li").length;
            function change(index){
                var ulMove=index*300;
                $("#ulList").animate({left:"-"+ulMove+"px"},500);
            }
            $("#left").click(function(){
                nowIndex=(nowIndex > 0) ? (--nowIndex) : 0;
                change(nowIndex);
            });
            $("#right").click(function(){
                nowIndex=(nowIndex < liNumber-1) ? (++nowIndex) : (liNumber-1);
                change(nowIndex);
            });
            $("#footer ul li").click(function(){
                $(this).find("a").addClass("ab");
                $(this).siblings().find("a").removeClass("ab");
            });
            $(".bg-light,.card-img-top,#ulList>li").mouseover(function(){
                $(this).css({"margin-top":"-5px","box-shadow":"0px 1px 2px 2px rgba(0,0,0,0.05)"});
            });
            $(".bg-light,.card-img-top,#ulList>li").mouseout(function(){
                $(this).css({"margin-top":"","box-shadow":""});
            });
        });
    </script>
</body>

</html>